<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列等高布局</title>
    <style type="text/css">


        /*ul {*/
            /*width: 100%;*/
            /*height: 400px;*/
        /*}*/
        .box{
            /*height:200px;*/
            width: 200px;
            /*float: left;*/
            text-align: center;
            display: table-cell;
            background: gray;
            overflow: hidden;
            /*border: 1px solid #ccc;*/
            /*vertical-align: middle;*/
        }

        /* img  默认有个底部边框  占几个像素 会导致元素无法 对齐 */
        /*.box img{*/
            /*margin: 20px 10px;*/
        /*}*/


        .title{
            text-align: left;
            font-size: 15px;
            color: #F14C5C;
            height: 40px;
            line-height: 40px;
            /*margin: 20px 10px;*/   /* margin 的颜色 */
            background: yellow;
        }

        .desc{
            text-align: left;
            font-size: 10px;
            /*margin: 20px 10px;*/
            background: purple; /*background 并不会影响 元素的颜色 */
            float: left;  /*如果不设置desc 的float 这里 title 和 desc 会有外边距重叠的情况出现 */
        }

        .f-w20{
            height:200px;
            width: 20px;
            display: table-cell;
        }


    </style>
</head>
<body>
    <ul>
        <li class="box">
            <img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg">
            <div class="title">表情包大师</div>
            <div class="desc">生活到处是表情包
            </div>
        </li>
        <li class="f-w20"></li>
        <li class="box">
            <img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg">
            <div class="title">表情包大师</div>
            <div class="desc">生活到处是表情包大师生活</div>
        </li>
        <li class="f-w20"></li>
        <li class="box">
            <img src="https://ss1.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/pic/item/242dd42a2834349b406751a3ceea15ce36d3beb6.jpg">
            <div class="title">表情包大师</div>
            <div class="desc">生活到处是表情包大师生活生活到处是表情包大师生活生活到处是表情包大师生活生活到处是表情包大师生活生活到处是表情包大师生活</div>
        </li>
        <li class="f-w20"></li>
    </ul>
</body>
</html>